import React, {Fragment, useRef, useState} from 'react';
import {Button, Table} from "antd";
import {PictureOutlined, SolutionOutlined} from "@ant-design/icons";
import {Commodities, CommodityColumns} from "@/mock/commodities";
import OrderImport from "@/pages/stock/order-import";
import OperationTable from "@/pages/stock/opreation-table";
import styles from './index.module.scss';

function App() {

  const [orderOpen, setOrderOpen] = useState(false);
  const operationTableRef = useRef<{ open: (handleInput?: boolean) => void; }>();

  function orderImport() {
    setOrderOpen(true);
  }

  function handleImport() {
    operationTableRef.current?.open(true);
  }

  return (
    <Fragment>
      <div className={styles.headerOperation}>
        <Button icon={<PictureOutlined/>} type='link' onClick={orderImport}>进货单识别</Button>
        <Button icon={<SolutionOutlined/>} type='link' onClick={handleImport}>手动导入</Button>
      </div>
      <Table
        bordered
        size={'small'}
        dataSource={Commodities}
        columns={CommodityColumns}
        pagination={{position: ['bottomCenter']}}
      />
      <OrderImport
        open={orderOpen}
        forceRender
        onFinish={() => operationTableRef.current?.open()}
        onCancel={() => setOrderOpen(false)}
        footer={[
          <Button key='cancel'>取消</Button>,
          <Button key='confirm' type='primary'>确认</Button>,
        ]}
      />
      <OperationTable
        ref={operationTableRef}
        forceRender
        footer={[
          <Button key='cancel'>取消</Button>,
          <Button key='confirm' type='primary'>确认</Button>,
        ]}
      />
    </Fragment>
  );
}

export default App;
